创建元素节点
<script type="text/javascript">
	var div = document.createElement('div');//创建一个div标签返回到div变量里去,这个div代表一个标签了;创建元素节点
	console.log(div);//js拿在手里，没有扔到页面上去
	div.innerHTML = '123';//还没有放到页面上，页面没有变化
	console.log(div);
</script>


<script type="text/javascript">
	//创建文本节点
	var text = document.createTextNode('sdf');
	console.log(text);
	//创建注释节点
	var commet = document.createComment('qwe');//括号里必须添加东西，不添加为空
	console.log(commet);
</script>


 

插入操作
ParentNode.appendChild();
ParentNode.insertBeforce(a,b);

appendChild;任何一个元素节点，都有appendChild方法，可以理解为push（在数组的最后以为插入新东西）
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		<span></span>
	</div>
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];//选出第一位div元素放到div
		var text = document.createTextNode('你好');//创建文本节点，放到text内
		div.appendChild(text);//把text放到div里
		console.log(div);
		//在div内添加span元素
		var span = document.createElement('span');
		div.appendChild(span);
		//在span内添加文本节点
		var text1 = document.createTextNode('text1');
		span.appendChild(text1);
		span.appendChild(text);//将text剪切到span内
		div.appendChild(span);//将span剪切到div内

//插入节点
		var strong = document.createElement('strong');
		div.insertBefore(strong,span);//在div内插入strong,在span之前
		var i = document.createElement('i');
		div.insertBefore(i,span);//在div内span之前插入i

		//删除节点，父删，自删。parent.removeChild();	child.remove();
		var ii = div.removeChild(i);//把i元素剪切到ii
		console.log(ii);
		strong.remove();
		console.log(strong);

		//替换节点parentNode.replaceChild(new,origin);拿新的元素替换老的元素
		var p = document.createElement('p');
		div.replaceChild(p,span);

	</script>
</body>
</html>






